import { Component, OnInit, ElementRef, Renderer2 } from '@angular/core';
import {
  NavController,
  NavParams,
  LoadingController
} from '@ionic/angular';
import { DataService } from '@services/data.service';


@Component({
  selector: 'device-controller',
  templateUrl: 'page.html',
  styleUrls: ['style.scss']
})
export class DeviceControllerPage implements OnInit {
  where = null;
  state = 'group';     // 判断显示的控制页面
  functionList;        // 界面功能点
  groupParams;         // 获取群控数据
  onlyParams;         // 获取单控数据
  deviceName;
  deviceIndex;
  deviceList;
  devices;
  process;            // 进度条返回值

  // 输入框内的值
  deviceValue = 21;


  constructor(
    private loadCtrl: LoadingController,
    private dataService: DataService,
    private navParams: NavParams,
    private el: ElementRef,
    private renderer: Renderer2
  ) {
    this.devices = this.navParams.get('data');
    this.deviceIndex = this.navParams.get('index');
    this.deviceName = this.navParams.get('deviceName');
    this.deviceList = {
      list: [],
      aim: this.deviceIndex,
    };

    let tempList; tempList = [];
    for (let m = 0; m < this.devices.length; m++) {
      if (this.devices[m]) {
        const element = this.devices[m];
        tempList.push({
          RoomName: element.deviceName,
          deviceId: element.deviceId,
        });
      }
    }
    this.deviceList.list = tempList;
  }

  ngOnInit() {
    this.init();
  }

  ionViewWillEnter() {
  }

  deviceChange(index) {
    console.log(index);
    // this.deviceName = this.devices[index].deviceName;
  }

  init() {
    const iBox = this.el.nativeElement.querySelector('#iBox');
    const slide = this.el.nativeElement.querySelector('#iBoxsd');
    const bg = this.el.nativeElement.querySelector('#iBoxbg');
    if (iBox && slide && bg) {
      slide.addEventListener('touchmove', (event) => {
        event.preventDefault();
        const styles = window.getComputedStyle(iBox, null);
        const width = styles.width;
        if (event.targetTouches.length === 1) {
          const touch = event.targetTouches[0];
          let moveleft = touch.pageX - 100;
          if (moveleft <= -8) {
            moveleft = 0;
          }
          if (moveleft >= parseInt(width, 10) - 8) {  // 减去小红点宽度
            moveleft = parseInt(width, 10);
          }
          this.renderer.setStyle(slide, 'left', moveleft + 'px');
          this.renderer.setStyle(bg, 'width', moveleft + 'px');
          this.process = Math.ceil(moveleft / 200 * 100);
          console.log(this.process);
        }
      });

      iBox.addEventListener('click', (event) => {
        const clickleft = event.offsetX;
        this.renderer.setStyle(slide, 'left', clickleft + 'px');
        this.renderer.setStyle(bg, 'width', clickleft + 'px');
        this.process = Math.ceil(clickleft / 200 * 100);
        console.log(this.process);
      });
    }
  }

  keepRun(i) {
    if (i) {
      this.deviceValue += 1;
    } else {
      this.deviceValue -= 1;
    }
  }

  isRun(i) {
    if (i) {
      alert('开启设备');
    } else {
      alert('关闭设备');
    }
  }

}
